<div class="row">
    <div class="col-md-12">
        <div class="panel panel-default">
            <div class="panel-heading">
                <h4 class="panel-title">
                    {{ 'APP.AUTH.LOGIN.PANEL.HEADING' | translate }}
                </h4>
            </div>
            <div class="panel-body">
				<div class="alert alert-info col-md-10 col-md-offset-1" role="alert">
					<h4>
						<i class="fa fa-info-circle md-pr-10"></i>
						<span>{{ 'APP.AUTH.LOGIN.ALERT.ADVANTAGE_INFO.TITLE' | translate }}</span>
					</h4>
					<p>{{ 'APP.AUTH.LOGIN.ALERT.ADVANTAGE_INFO.MSG' | translate }}</p>
				</div>

                <form name="loginForm" class="form-horizontal">
                    <div class="form-group has-feedback"
                         ng-class="{'has-error': loginForm.username.$invalid && !loginForm.username.$pristine,
								'has-success': loginForm.username.$valid && loginForm.username.$dirty}">
                        <label for="username" class="control-label col-md-2">
                            {{ 'APP.AUTH.LOGIN.LABEL.USERNAME' | translate }}
                        </label>
                        <div class="col-md-9">
                            <input type="text" id="username" name="username" class="form-control"
                                   ng-model="user.username"
                                   ng-maxlength="20" ng-pattern="'^[a-zA-Z0-9\\-\\.]+$'" required
                                   maxlength="20"
                                   placeholder="{{ 'APP.AUTH.LOGIN.PLACEHOLDER.USERNAME' | translate }}">
                            <span class="fa form-control-feedback"
                                  ng-class="{'fa-times': loginForm.username.$invalid && loginForm.username.$dirty,
											 'fa-check': !loginForm.username.$invalid && loginForm.username.$dirty}"></span>
                            <div ng-show="loginForm.username.$invalid && loginForm.username.$dirty">
                                <span class="help-block mt5 ml10" ng-messages="loginForm.username.$error">
                                    <span ng-message="required">{{ 'APP.AUTH.LOGIN.LABEL.VALIDATION.USERNAME.REQUIRED' | translate }}</span>
                                    <span ng-message="maxlength">{{ 'APP.AUTH.LOGIN.LABEL.VALIDATION.USERNAME.MAXLENGTH' | translate }}</span>
                                    <span ng-message="pattern">{{ 'APP.AUTH.LOGIN.LABEL.VALIDATION.USERNAME.PATTERN' | translate }}</span>
                                </span>
                            </div>
                        </div>
                    </div>
                    <div class="form-group has-feedback"
                         ng-class="{'has-error': loginForm.password.$invalid && !loginForm.password.$pristine,
								    'has-success': loginForm.password.$valid && loginForm.password.$dirty}">
                        <label for="password" class="control-label col-md-2">
                            {{ 'APP.AUTH.LOGIN.LABEL.PASSWORD' | translate }}
                        </label>
                        <div class="col-md-9">
                            <input type="password" id="password" name="password" class="form-control"
                                   ng-model="user.password"
                                   required
                                   placeholder="{{ 'APP.AUTH.LOGIN.PLACEHOLDER.PASSWORD' | translate }}">
                            <span class="fa form-control-feedback"
                                  ng-class="{'fa-times': loginForm.password.$invalid && loginForm.password.$dirty,
											 'fa-check': !loginForm.password.$invalid && loginForm.password.$dirty}"></span>
                            <div ng-show="loginForm.password.$invalid && loginForm.password.$dirty">
                                <span class="help-block mt5 ml10" ng-messages="loginForm.password.$error">
                                    <span ng-message="required">{{ 'APP.AUTH.LOGIN.LABEL.VALIDATION.PASSWORD.REQUIRED' | translate }}</span>
                                </span>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-offset-2 col-md-9">
                        <button type="submit" class="btn btn-primary"
                                ng-click="ctrl.doLogin()"
                                ng-disabled="loginForm.$pristine || loginForm.$invalid">
                            {{ 'APP.AUTH.LOGIN.BUTTON.SUBMIT' | translate }}
                        </button>
                        <button class="btn btn-default" ui-sref="main.auth.register">
                            {{ 'APP.AUTH.LOGIN.BUTTON.REGISTER' | translate }}
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
